<script setup lang="ts">
import type { RouteRecordRaw } from "vue-router";
import { thumbStyle } from "_s/common/quasarStyle";
import { isMiniMenu } from "_s/hooks/useMenu";
import { useMenuStore } from "_s/stores/modules/menu";
import Logo from "../logo/index.vue";
// setMiniMenu;
const router = useRouter();

const { routers } = useMenuStore();
const menuList = routers.filter(item => item.children && item.children.length > 0 && !item.meta?.hidden);

const { dark } = useQuasar();

const routerActive = (item: RouteRecordRaw) => {
  const currentPath = router.currentRoute.value.path;
  if (item.path == currentPath) {
    return true;
  }
  if (item.children) {
    for (let i = 0; i < item.children.length; i++) {
      const path = (item.path + "/" + item.children[i]?.path).replace(/\/\//g, "/");
      if (path == currentPath) {
        return true;
      }
    }
  }
  return false;
};

const toPath = (item: RouteRecordRaw): string => {
  if (item.children?.length === 1) {
    return (item.path + "/" + (item.children?.[0]?.path || "")).replace(/\/\//g, "/");
  }
  return "";
};
const getIcon = (item: RouteRecordRaw): string => {
  if (!item.children) return "";
  if (item.children.length === 1) {
    return item.children[0]?.meta?.icon as string;
  }
  return item.meta?.icon as string;
};

const toOpen = (item: Partial<RouteRecordRaw>) => {
  if (!item.children) return;
  const currentPath = router.currentRoute.value.path;
  const arr: string[] = [];
  for (let i = 0; i < item.children.length; i++) {
    arr.push((item.path + "/" + item.children[i]?.path).replace(/\/\//g, "/"));
  }
  if (arr.indexOf(currentPath) > -1) {
    return true;
  } else {
    if (item.path == currentPath) {
      return true;
    }
  }
  return false;
};

const getExtIcon = (item: RouteRecordRaw): string => {
  if (!item.children) return "";
  if (item.children.length > 1) {
    return "";
  }
  return " ";
};
const getLabel = (item: RouteRecordRaw): string => {
  if (!item.children || !Array.isArray(item.children)) return "";
  let label = item.meta?.title as string;
  if (item.children.length == 1) {
    label = item.children[0]?.meta?.title as string;
  }
  return label;
};
const drawermenu = ref(true);

const showtarget = ref(false);
const targetEl = ref<string>();

const minItem = ref<RouteRecordRaw>();

const showChildMenu = (id: string, item: RouteRecordRaw) => {
  minItem.value = item;
  if (!showtarget.value) {
    targetEl.value = id;
    void nextTick(() => {
      showtarget.value = true;
    });
  } else {
    if (id != targetEl.value) {
      showtarget.value = false;
      targetEl.value = id;
      void nextTick(() => {
        showtarget.value = true;
      });
    }
  }
};
</script>
<template>
  <q-drawer
    v-model="drawermenu"
    side="left"
    bordered
    content-class="no-scroll q-pt-md"
    behavior="desktop"
    show-if-above
    :width="260"
    :mini="!drawermenu || isMiniMenu"
    :breakpoint="1200"
  >
    <template v-slot:mini>
      <Logo :isMiniMenu="isMiniMenu" />
      <q-separator />
      <q-scroll-area
        style="height: calc(100% - 270px)"
        :thumb-style="thumbStyle"
      >
        <q-list>
          <template
            v-for="(item, index) in menuList"
            :key="item.name"
          >
            <q-item
              clickable
              exact-active-class="text-white bg-accent"
              :active="routerActive(item)"
              class="items-center"
              :id="'minitem' + index"
              @mouseenter="showChildMenu('#minitem' + index, item)"
              @click="showChildMenu('#minitem' + index, item)"
              v-ripple
            >
              <q-icon :name="getIcon(item)"></q-icon>
            </q-item>
          </template>
        </q-list>
      </q-scroll-area>

      <q-menu
        v-model="showtarget"
        :target="targetEl"
        auto-close
        fit
        anchor="top right"
        self="top left"
      >
        <q-list style="min-width: 100px">
          <template
            v-for="childItem in minItem?.children"
            :key="childItem.name"
          >
            <q-item
              dense
              clickable
              :to="(minItem?.path + '/' + childItem.path).replace(/\/\//g, '/')"
              exact-active-class="bg-primary text-white"
              class="items-center q-py-xs"
              v-ripple
            >
              <div class="q-pa-xs">
                <q-icon
                  :name="getIcon(childItem)"
                  size="14px"
                />
              </div>

              <div class="text-caption q-ml-sm">{{ $t(childItem.meta!.title as string) }}</div>
            </q-item>
          </template>
        </q-list>
      </q-menu>
    </template>

    <q-scroll-area
      style="height: calc(100% - 270px)"
      :thumb-style="thumbStyle"
    >
      <Logo />
      <q-separator />
      <q-list>
        <template
          v-for="item in menuList"
          :key="item.name"
        >
          <q-expansion-item
            dense
            group="drawermenu"
            class="relative-position expansion-menu"
            :active-class="dark.isActive ? 'text-white bg-grey-9 active-menu' : 'text-primary bg-grey-2 active-menu'"
            :to="toPath(item)"
            :expand-icon="getExtIcon(item)"
            :default-opened="toOpen(item)"
          >
            <template v-slot:header>
              <div
                class="flex items-center"
                style="min-width: 90%"
              >
                <div class="q-py-sm">
                  <q-icon
                    :name="getIcon(item)"
                    size="14px"
                  />
                </div>
                <div class="q-ml-md">{{ $t(getLabel(item)) }}</div>
              </div>
            </template>
            <q-list v-if="item.children!.length > 1">
              <template
                v-for="childItem in item.children"
                :key="childItem.name"
              >
                <q-item
                  clickable
                  :active-class="dark.isActive ? 'text-white bg-grey-9 active-menu' : 'text-primary bg-grey-2 active-menu'"
                  :active="router.currentRoute.value.path == (item.path + '/' + childItem.path).replace(/\/\//g, '/')"
                  :to="(item.path + '/' + childItem.path).replace(/\/\//g, '/')"
                  class="items-center"
                  v-ripple
                >
                  <div class="q-ml-lg q-mr-sm">
                    <q-icon
                      :name="getIcon(childItem)"
                      size="14px"
                    />
                  </div>
                  <div>{{ $t(childItem.meta!.title as string) }}</div>
                </q-item>
              </template>
            </q-list>
          </q-expansion-item>
        </template>
      </q-list>
    </q-scroll-area>
  </q-drawer>
</template>

<style lang="scss">
.active-menu {
  border-right: 4px solid var(--q-primary);
}
// .expansion-menu > .q-item--dense {
//   min-height: 48px !important;
// }

.expansion-menu a {
  min-height: 3rem !important;
}
</style>

<style scoped lang="scss">
.userListFontSize {
  font-size: 14px;
}
</style>
